<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div v-if='isShow'>
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
            <el-breadcrumb-item>标签管理</el-breadcrumb-item>
            <!-- <el-breadcrumb-item 
            :to="{ path: '/subjects/tags' }"
            v-for="item in routeList"
            :key='item.path'>
            {{item.meta.title}}
            </el-breadcrumb-item> -->
          </el-breadcrumb>
          <hr>
        </div>
        <div class='headerBox'>
          <el-form :inline="true" :model="params" class="demo-form-inline">
            <el-form-item label="标签名称">
              <el-input v-model="params.tagName" placeholder="请输入"></el-input>
            </el-form-item>
            <el-form-item style="margin-left:40px;" label="状态">
              <el-select v-model="params.state" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
                <!-- <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id"></el-option> -->
              </el-select>
            </el-form-item>
            <el-form-item style="margin-right:200px;">
              <el-button @click.native="clearBtn">清除</el-button>
              <el-button type="primary" @click.native="searchBtn">搜索</el-button>
            </el-form-item>
            <el-form-item v-show='isShow'>
              <el-button type="text" @click.native="$router.go(-1)"><i class='el-icon-back'/> 返回学科</el-button>
              <!-- <el-button type="success" icon="el-icon-edit" round @click.native="backSubject"></el-button> -->
            </el-form-item>
            <!-- <div class='tagsPosition'> -->
            <el-form-item>
              <el-button type="success" icon="el-icon-edit" round @click.native="addTags">新增标签</el-button>
            </el-form-item>
            <!-- </div> -->
          </el-form>
             <!-- <el-button type="success" size="small" icon="el-icon-edit" round @click.native="addTags">新增标签</el-button> -->
        </div>
        <!-- 总数据提示框 -->
        <el-row>
          <el-col :span="24"><div class="tagsTotal">
             <i class="el-icon-s-comment"/><span>数据一共<i>{{total}}</i>条</span></div></el-col>
        </el-row>
        <!-- 表格内容 -->
        <template>
          <el-table
            :data="tagsList"
            stripe
            style="width: 100%">
              <el-table-column type='index' prop="date" label="序号" width="180"></el-table-column>
              <el-table-column prop="subjectName" label="所属学科" width="180"></el-table-column>
              <el-table-column prop="tagName" label="标签名称"></el-table-column>
              <el-table-column prop="username" label="创建者"></el-table-column>
              <el-table-column prop="addDate" label="创建日期">
                <template #default="{row}">
                  {{transTime(row.addDate)}}
                </template>
              </el-table-column>
              <el-table-column prop="state" label="状态">
                <template #default="{row}">
                  {{transState(row.state)}}
                </template>
              </el-table-column>
              <el-table-column label="操作"  fixed="right" width="200">
              <template slot-scope="scope">
                <el-button type="text" size="medium" @click.native='handleState(scope.row)'>
                  <span v-if="scope.row.state===1">禁用</span>
                  <span v-else>启用</span>
                </el-button>
                <el-button type="text" size="medium" :disabled="scope.row.state===0" @click.native="editTags(scope.row.id)">修改</el-button>
                <el-button type="text" size="medium" :disabled="scope.row.state===0" @click.native="delTagsBtn(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 分页器 -->
        <template>
          <el-pagination
          style="margin-left:700px;margin-top:10px;"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="params.pagesize"
          background
          layout="prev, pager, next, sizes, jumper"
          :total="total">
          </el-pagination>
        </template>
      </el-card>

      <!-- 来自本页面新增弹窗 @update-subjectadd="dataBack(data)" :form-subject="fromSubjectId" -->
      <tags-add 
      ref='editForm'  
      :showVisible='addDialog' 
      :subjectVisible='subjectVisible'
      @close-dialog='closeDialog' 
      @add-tags='fetchTagsList' 
      :fromSubjectId='fromSubjectId'
      />
    </div>
  </div>
</template>

<script>
import {list,remove,changeState,detail} from '@/api/hmmm/tags'
import dayjs from 'dayjs'
import TagsAdd from '@/module-hmmm/components/tags-add'
export default {
  components:{
    TagsAdd
  },
   data(){
    return {
      // tagsForm:{
      //   name:'',
      // },
      options:[
        {id:0,name:'禁用'},
        {id:1,name:'启用'}
      ],
      tagsList:[],
      state:'',
      total:0,
      params:{
        tagName:'',
        page:1,
        pagesize:10
      },
      addDialog:false,
      stateText:'',
      relationBtn:true,
      fromSubjectId:this.$route.query.id,
      // fromSubjectId:null,
      subjectVisible:false,
      // isShow:true
      isShow:false
    }
  },
  computed:{
    // status(){
    //   return status
    // }
    routeList(){
      return this.$route.matched
    }
  },
  mounted() {
    this.fetchTagsList()
    if(this.$route.query.id){
      this.isShow=true
    }
    // console.log(this.$route)
  },
  methods: {
    // 获取列表
    async fetchTagsList(){
      const id = this.$route.query.id
      if(id){
        const {data} = await list({
        ...this.params,
        subjectID:Number(id)
      })
      this.tagsList=data.items
      this.total=data.counts
      }else{
        const {data} = await list({
        ...this.params
      })
      this.tagsList=data.items
      this.total=data.counts
      }      
    },
    // 时间格式转换
    transTime(value){
      return dayjs(value).format('YYYY-MM-DD hh:mm:ss')
    },
    // 状态格式转换
    transState(value){
      const TYPE = {
        0:'已禁用',
        1:'已启用'
      }
      return TYPE[value]
    },
    // 控制 禁用/启用 按钮
    async handleState(val){
      try{
        val.state=val.state=== 1 ? 0 : 1
        this.$message.success('操作成功')
      } catch(error){
        console.log(error)
      }
    },

    // 改变当前页
    handleCurrentChange(page){
      this.params.page=page
      this.fetchTagsList()
    },
    // 改变每页展示的数据
    handleSizeChange(size){
      this.params.pagesize=size
      this.params.page=1
      this.fetchTagsList()
    },
    // 删除功能
    delTagsBtn(id){
      this.$confirm('你确认要删除么?', '温馨提示').then(async() => {
        // 点击确定
        // 调用接口
        // console.log(id)
        await remove({id:id})
        // 刷新列表
        this.fetchTagsList()
        // 提示用户
        this.$message.success('删除成功')
      }).catch(error => {
          console.log(error)
      })
    },
    // 新增弹窗
    addTags(){
    // this.fromSubjectId=this.$route.query.id
        this.addDialog=true
    },
    // 关闭弹窗
    closeDialog(){
      this.addDialog=false
      this.subjectVisible=false
    },
    // 修改标签
    async editTags(id){
        this.addDialog=true
        this.$refs.editForm.detailTags(id)
    },
    clearBtn(){
      this.params={
        name:'',
        options:''
      }
      // 刷新表格
      this.fetchTagsList()
    },
    async searchBtn(){
      this.params.page=1
      const {data} = await list({
        ...this.params
      })
      // console.log(data)
      this.tagsList=data.items
      this.total=data.counts
    }
  },
}
</script>

<style scoped>
.demo-form-inline {
  display: flex;
  justify-content: space-between;
   margin-top:10px;
}
/* .headerBox{
  display: flex;
  justify-content: space-between;
  margin-top:20px;
} */
  .tagsTotal{
    margin-bottom: 20px;
    font-size: 14px;
    padding: 10px;
    padding-left: 20px;
    color: #909399;
    background-color: #f4f4f5;
    border-radius: 6px;
  }
  .tagsTotal span{
    margin-left: 10px;
  }
   .tagsTotal span i {
    color: red;
    margin: 5px;
   }
   /* .tagsPosition{
    display: flex;
    justify-content: flex-end;
   } */
</style>
